import React, {useState} from "react";
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
import './style.less'
import Pagination from "./Pagination";


const AutoPlaySwipeableViews = autoPlay(SwipeableViews);




const Swiper =(props)=>{
    const [index,setIndex]=useState(0)
    function handleChangeIndex(index){
        setIndex(index)
     }
    return (
    <div>
        <div className='swiper'>
            {/*轮播图使用的是https://react-swipeable-views.com/demos/demos/*/}
            <AutoPlaySwipeableViews index={index} onChangeIndex={handleChangeIndex}>
                {
                    props.Baneers.map((ele,index)=>{
                        return(
                            <div key={index} className='swiper-view'>
                                <img src={ele} alt=''/>
                            </div>
                        )
                    })
                }
            </AutoPlaySwipeableViews>
        {/*     调用指示器Pagination*/}
            <Pagination len={props.Baneers.length} currentIndex={index}/>
        </div>
    </div>
    )
}
export default Swiper